<template>
  <!--参数取值必须在标签内。不能单独在template内-->
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>学生信息录入</span>
        <el-button type="primary" size="medium" v-on:click="baseadd()">录入<i class="el-icon-upload el-icon--right"></i></el-button>
        <el-button type="primary" size="medium" v-on:click="baseadd()">批量录入<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="学号">
          <el-input v-model="userform.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userform.sname"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="userform.gender" placeholder="选择学生性别">
            <el-option label="男" v-model="userform.gender" value="男"></el-option>
            <el-option label="女" v-model="userform.gender" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="userform.major"></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="userform.birth_year" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input v-model="userform.native_place"></el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="userform.nation"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-input v-model="userform.politics_status"></el-input>
        </el-form-item>
        <el-form-item label="入学时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="userform.enrollment" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="辅导员">
          <el-input v-model="userform.instructor"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号">
          <el-input v-model="userform.dorm"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="userform.telephone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userform.mailbox"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="userform.live_place"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { basequery } from "@/api/basequery.js";
import conf from "@/utils/config.js";
const { token } = conf;
export default {
  name: "UserProfile",
  props:['id'],
  data() {
    return {
      userform:{        id:'',
        sclass:"",
        sname: '',
        gender:"",
        major:"",
        instructor:"",
        dorm:"",
        telephone:"",
        nation:"",
        politics_status:"",
        birth_year:"",
        birth_month:"",
        native_place:"",
        live_place:"",
        mailbox:"",
        enrollment:""},
    }

  },
  mounted:function(){
    basequery(this.id)
      .then((res) => {
        console.log(res);
        //返回值格式 {"age":1,"id":1,"name":"zxc"}  注意 不是{fname:"John",lname:"Doe",age:25}这种格式
        var jsonObj = eval('('+res.request.response +')');
        this.userform=jsonObj.students[0];
      })
      .catch((err) => {
        this.$notify.error({
          title: "错误",
          message: "服务器内部错误",
        });
      });
  },
  methods: {
    show() {
      console.log(this.$route.params.id)
    },
    baseadd(){
      var url='/student/add';
      this.$http.post(url,this.userform).then((res) =>{
        console.log(res);
        var jsonObject = res.data;
        if(jsonObject.code==200){
          this.$notify.success({
            title: "提示",
            message: jsonObject.message,
          });
        }
        else if(jsonObject.code==400){
          this.$notify.error({
            title: "提示",
            message: jsonObject.message,
          });
        }
      })
        .catch((err) => {
          this.$notify.error({
            title: "错误",
            message: "服务器内部错误",
          });
        });
    }
  }
}
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
